import React, {Component} from 'react';
import GoBack from "@/components/TheGoBack";
import BasicInfo from "./basicInfo";
import {Steps, Button, Form, Input, Space, Radio, InputNumber, DatePicker, Col, Row, Modal} from "antd";
import _ from 'lodash'
import {apiAppConfigCarouselAdd, apiAppConfigCarouselEdit, apiAppConfigCarouselView} from '@/request/app/appScreenAD'
import Step2 from "./step2";

class Add extends Component {
    constructor(props) {
        super(props);
        this.state = {
            steps: [
                {
                    title: '基本信息',
                },
                {
                    title: '信息编辑',
                },
            ],
            current: 0,
            basicInfoData:{},
            storeInfoData:{}
        };
    }

    async componentDidMount() {

    }

    getData = async (e) => {

    }
    //form表单确定事件
    onFinish = (e) => {
        this.storeInfo.onFinish().then(values=>{
            console.log("提交")
            console.log("基础信息",this.state.basicInfoData)
            console.log("提交",values)
        })
    }
    // 下一步
    next = (e) => {
        if (e === 0){
            this.basicInfo.onFinish().then(values=>{
                console.log(e,values)
                this.setState({
                    current: e + 1,
                    basicInfoData: values
                })
            })
        }
    }
    // 上一步
    prev = (e) => {
        console.log(e)
        this.storeInfo.getData().then(values=>{
            console.log(e,values)
            this.setState({
                current: e - 1,
                storeInfoData: values
            })
        })
    }

    render() {
        let {current, basicInfoData,storeInfoData, steps} = this.state;
        return (
            <div className="commodity-list-detail p-layout-box">
                <GoBack history={this.props.history} title={"新增店铺"}/>
                <div className="p-layout-content">
                    <Steps current={current} items={[]}/>
                    <div className="steps-content">
                        {
                            current == 0 && (<BasicInfo onRef={ node => this.basicInfo = node} data={basicInfoData}/>)
                        }
                        {
                            current == 1 && (<Step2 onRef={ node => this.storeInfo = node} data={storeInfoData}></Step2>)
                        }
                    </div>
                    <div className="steps-action">
                        <Row>
                            <Col span={4} offset={4}>
                                <Space>
                                    {current < steps.length - 1 && (
                                        <Button type="primary" onClick={() => this.next(current)}>下一步</Button>
                                    )}
                                    {current === steps.length - 1 && (
                                        <Button type="primary" onClick={() => this.onFinish(current)}>
                                            提交
                                        </Button>
                                    )}
                                    {current > 0 && (
                                        <Button onClick={() => this.prev(current)}>上一步</Button>
                                    )}
                                </Space>
                            </Col>
                        </Row>
                    </div>
                </div>
            </div>
        );
    }
}

export default Add;
